<template>
  <div class="todo">
    <div class="title">
      {{date}}  {{name}}
    </div>
    <div class="add" v-if="types[type]" >
      <span class="name">选择{{types[type].name}}</span>
      <span class="num">已选 {{num}} 个</span>
<!--      <span class="btn" >详情</span>-->
    </div>
    <div class="routes">
      <div class="route" v-for="(titleVo,index) in titleVos" :key="index">
        <div class="route-title">
          <span class="name"> {{ titleVo.name }}</span>
          <!--        <span class="del">删除</span>-->
        </div>

        <div class="items">
          <div class="item" v-for="(item,index) in titleVo.items" :key="index">
            <span class="name">{{item}}</span>
            <div class="inp">
              <span class="label">勾选</span>
              <input type="checkbox" name="title" :value="item" v-model="titles">
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="routes" v-if="routes.length>0">-->
<!--      <div class="route" v-for="(route,index) in routes" :key="index">-->
<!--      <div class="route-title">-->
<!--       <span class="name"> {{ route.entity.name }}</span>-->
<!--&lt;!&ndash;        <span class="del">删除</span>&ndash;&gt;-->
<!--      </div>-->
<!--        <div class="items" v-if="type==0">-->
<!--          <div class="item" v-for="item in titleVos" :key="">-->
<!--            <span class="name">{{item.name}}</span>-->
<!--            <div class="inp">-->
<!--              <span class="label">勾选</span>-->
<!--              <input type="checkbox" name="shopId" :value="item.shopName" v-model="titles">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--      <div class="items" v-if="type==0">-->
<!--        <div class="item" v-for="item in route.shops" :key="item.id">-->
<!--          <span class="name">{{item.shopName}}</span>-->
<!--          <div class="inp">-->
<!--            <span class="label">勾选</span>-->
<!--              <input type="checkbox" name="shopId" :value="item.shopName" v-model="titles">-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--        <div class="items" v-if="type==1">-->
<!--          <div class="item" v-for="item in route.schools" :key="item.id">-->
<!--            <span class="name">{{item.name}}</span>-->
<!--            <div class="inp">-->
<!--              <span class="label">勾选</span>-->
<!--              <input type="checkbox" name="shopId" :value="item.name" v-model="titles">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="items" v-if="type==2">-->
<!--          <div class="item" v-for="item in route.shops" :key="item.id">-->
<!--            <span class="name">{{item.shopName}}</span>-->
<!--            <div class="inp">-->
<!--              <span class="label">选择</span>-->
<!--              <input type="radio" name="shopId" :value="item.shopName" v-model="titles">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="items" v-if="showUserToDoMap">-->
<!--          <div class="item" v-for="item in route.shops" :key="item.id">-->
<!--            <span class="name">{{item.shopName}}</span>-->
<!--            <div class="inp">-->
<!--              <span class="label">选择</span>-->
<!--              <input type="radio" name="shopId" :value="item.shopName" v-model="titles">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--    </div>-->
<!--    </div>-->

    <div class="con-btn" @click="confirm" v-if="canEdit">
      提交
    </div>
  </div>
</template>

<script>
import { add, getTypes, getTitleVo, listByDate } from '@/api/todo'
import { showAlert } from '@/dialog'
import { parseTime, str2Date } from '@/util/time'
export default {
  created () {
    this.name = this.$route.query.name
    this.date = this.$route.query.date
    this.planId = this.$route.query.planId
    this.type = parseInt(this.$route.query.type)
    this.getTitles()
    this.getTypes()
    this.getTitleVo()
  },
  methods: {
    getTitleVo () { // 获取所有可以选的标题
      getTitleVo(this.type, parseTime(this.date)).then(res => {
        this.titleVos = res.data.filter(d => {
          return d.items.length > 0
        })
      })
    },
    getTitles () { // 或有所有已经选了的标题
      // 获取所有日程
      listByDate(parseTime(this.date), parseTime(this.date)).then(res => {
        res.data.forEach(l => {
          // 同类型且不是删除状态
          if (l.type === this.type && l.status != 3) {
            this.have = true
            this.titles.push(l.title)
          }
        })
      })
    },
    getTypes () {
      getTypes().then(res => {
        res.data.forEach(m => {
          this.$set(this.types, m.value, m)
        })
      })
    },
    confirm () {
      add(this.type, this.planId, parseTime(this.date), this.titles).then(res => {
        showAlert('操作成功!').then(res => {
          this.$router.back()
        })
      })
    }
  },
  computed: {
    showRoute () {
      return this.type <= 2
    },
    showUserToDoMap () {
      return this.type >= 3 && this.type <= 5
    },
    canEdit () { // 暂时可以添加今天的
      // 当天 且没有新增过 可以修改
      if (!this.have && new Date().toLocaleDateString() == str2Date(this.date).toLocaleDateString()) {
        return true
      }
      // 只能新增未来时间
      return new Date().getTime() < str2Date(this.date).getTime()
      // return new Date().toLocaleDateString() < new Date(parseTime(this.date)).toLocaleDateString()
    },
    num () {
      return this.titles.length
    }
  },
  data () {
    return {
      have: false,
      titleVos: [],
      types: { },
      titles: [],
      date: null,
      name: null,
      planId: null,
      type: null
    }
  }
}
</script>

<style scoped lang="stylus">
.todo
  padding 10px 10px
  .title
    width 100%
    height 60px
    color #55545D
    font-size 22px
    display flex
    justify-content center
    align-items center
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
  .add
    height 40px
    background-color white
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
    margin-top 20px
    font-size 18px
    color #55545D
    display flex
    align-items center
    justify-content space-between
    padding 0 10px
    .num
      font-size 14px
    .btn
      color red
  .routes
    margin-top 20px
    padding-bottom 60px
    .route
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      margin-bottom 20px
      .route-title
        font-size 18px
        color #55545D
        border-bottom 1px solid rgba(89, 88, 87, 0.52)
        height 40px
        display flex
        align-items center
        justify-content center
        padding 0 10px
        .del
          color red
      .items
        .item
          display flex
          align-items center
          justify-content space-between
          align-items center
          font-size 18px
          color #55545D
          height 40px
          padding 0 10px
          .inp
            display flex
            align-items center
            .label
              font-size 16px
              color #55545D
              margin-right 10px
  .con-btn
    height 40px
    display flex
    align-items center
    justify-content center
    color white
    font-size 18px
    background-color red
    position fixed
    bottom 10px
    left 10px
    right 10px

</style>
